<template>
  <el-form-item :prop="props.prop" :label="props.label">
    <CommonInput v-if="props.type === 'input'" v-model="myValue" width="218px" />
    <CommonSelect v-else-if="props.type === 'select'" v-model:value="myValue" :options="props.options" :multiple="props.multiple" collapse-tags collapse-tags-tooltip />
    <DatePicker v-else-if="props.type === 'date'" v-model="myValue" width="218px" />
    <common-date v-else-if="props.type === 'timeRange'" v-model="myValue" />
  </el-form-item>
</template>
<script lang="ts" setup>
import CommonInput from '@/components/input/CommonInput.vue'
import CommonSelect from '@/components/select/CommonSelect.vue'
import DatePicker from '@/components/date-picker/DatePicker.vue'
import CommonDate from '@/components/date/CommonDate.vue'
import { computed, type PropType } from 'vue'

const props = defineProps({
  prop: {
    type: String,
    required: true
  },
  label: {
    type: String,
    required: true
  },
  // type的类型目前仅支持input、select、data、timeRange 这4种，后续根据项目需要，再另行添加
  type: {
    type: String,
    default: 'input'
  },
  modelValue: {
    type: [Array, Number, String] as PropType<string[] | number | string>,
    default: ''
  },
  options: {
    type: Array as PropType<any[]>,
    default: () => []
  },
  multiple: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue'])
const myValue: any = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit('update:modelValue', val)
  }
})
</script>
